<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>
		<div id="chart-panel" style="height: 800px;width: 100%"></div>
	</body>
	<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
	<script>
		var dom = document.getElementById("chart-panel");
		var myChart = echarts.init(dom);
		var option;
		var value = 15;
		var icon =
			'';

		var wanchengData = [180, 119, 155, 101, 65];
		var mubiaoData = [250, 250, 250, 250, 250];

		colors = [
			['#389af4', '#dfeaff'],
			['#ff8c37', '#ffdcc3'],
			['#ffc257', '#ffedcc'],
			['#fd6f97', '#fed4e0'],
			['#a181fc', '#e3d9fe'],
		];
		option = {
			backgroundColor: '#fff',
			title: [{
					text: 'a',
					left: '13.5%',
					top: '80%',
					textAlign: 'center',
					textStyle: {
						fontWeight: 'normal',
						fontSize: '16',
						color: '#389af4',
						textAlign: 'center',
					},
				},
				{
					text: 'b',
					left: '31.5%',
					top: '80%',
					textAlign: 'center',
					textStyle: {
						fontWeight: 'normal',
						fontSize: '16',
						color: '#ff8c37',
						textAlign: 'center',
					},
				},
				{
					text: 'c',
					left: '49.5%',
					top: '80%',
					textAlign: 'center',
					textStyle: {
						fontWeight: 'normal',
						fontSize: '16',
						color: '#ffc257',
						textAlign: 'center',
					},
				},
				{
					text: 'd',
					left: '67.5%',
					top: '80%',
					textAlign: 'center',
					textStyle: {
						fontWeight: 'normal',
						fontSize: '16',
						color: '#fd6f97',
						textAlign: 'center',
					},
				},
				{
					text: 'e',
					left: '85.5%',
					top: '80%',
					textAlign: 'center',
					textStyle: {
						fontWeight: 'normal',
						fontSize: '16',
						color: '#a181fc',
						textAlign: 'center',
					},
				},
			],
			grid: [{
					left: '5%',
					top: '5%',
					bottom: '30%',
					right: '5%',
				},
				{
					left: '5%',
					top: '15%',
					bottom: '30%',
					right: '5%',
				},
			],
			legend: {
				show: false,
				data: ['完成', '目标'],
				align: 'left',
				right: 0,
				textStyle: {
					color: '#434e79',
					fontSize: 14,
					fontWeight: 400,
				},
				itemWidth: 14,
				itemHeight: 14,
				itemGap: 35,
			},
			tooltip: {
				show: false,
				trigger: 'axis',
				padding: [8, 10],
				textStyle: {
					color: '#fff',
				},
				backgroundColor: 'rgba(0,0,0,0.5)',
				axisPointer: {
					type: 'none',
				},
			},
			xAxis: [{
					type: 'category',
					gridIndex: 0,
					data: ['A', 'B', 'C', 'D', 'E'],
					axisLine: {
						lineStyle: {
							color: '#E0E2E5',
						},
					},
					axisTick: {
						show: false,
					},
					axisLabel: {
						show: false,
						textStyle: {
							color: '#434e79',
							fontSize: 16,
							fontWeight: 400,
						},
					},
				},
				{
					type: 'category',
					gridIndex: 1,
					data: ['a', 'b', 'c', 'd', 'e'],
					axisLine: {
						lineStyle: {
							color: '#E0E2E5',
						},
					},
					axisTick: {
						show: false,
					},
					axisLabel: {
						show: true,
						textStyle: {
							color: '#434e79',
							fontSize: 16,
							fontWeight: 400,
						},
					},
				},
			],
			yAxis: [{
					type: 'value',
					gridIndex: 0,
					position: [-20, 0, 0, 0],
					show: true,
					interval: 50,
					axisLine: {
						show: false,
					},
					axisLabel: {
						show: false,
					},
					splitLine: {
						show: false,
						lineStyle: {
							color: '#E0E2E5',
						},
					},
				},
				{
					type: 'value',
					gridIndex: 1,
					position: [20, 0, 0, 0],
					offset: [-50],
					show: true,
					max: 200,
					interval: 50,
					axisLine: {
						show: false,
					},
					axisLabel: {
						padding: [20, 0, 0, 0],
						verticalAlign: 'top',
						// backgroundColor:'red',
						formatter: function(value, index) {
							if (value === 0) {
								value = '';
								return value;
							} else {
								return value;
							}
						},
					},
					splitLine: {
						lineStyle: {
							color: '#E0E2E5',
						},
					},
				},
			],
			series: [{
					name: '目标',
					type: 'bar',
					max: 250,
					silent: true,
					barMaxWidth: 20,
					xAxisIndex: 0,
					yAxisIndex: 0,
					symbol: 'none',
					z: 0,
					itemStyle: {
						normal: {
							color: 'rgba(255,255,255,0)',
						},
					},
					data: mubiaoData,
					markLine: {
						symbol: ['none', 'none'],
						symbolSize: 15,
						lineStyle: {
							color: '#E0E2E5',
						},
						label: {
							show: false,
						},
						data: [{
								xAxis: 'A',
							},
							{
								xAxis: 'B',
							},
							{
								xAxis: 'C',
							},
							{
								xAxis: 'D',
							},
							{
								xAxis: 'E',
							},
						],
					},
					markPoint: {
						symbol: 'circle',
						symbolSize: 15,
						label: {
							show: false,
						},
						data: [{
								yAxis: 250,
								xAxis: 'A',
								itemStyle: {
									normal: {
										color: '#389af4',
									},
								},
							},
							{
								yAxis: 250,
								xAxis: 'B',
								itemStyle: {
									normal: {
										color: '#ff8c37',
									},
								},
							},
							{
								yAxis: 250,
								xAxis: 'C',
								itemStyle: {
									normal: {
										color: '#ffc257',
									},
								},
							},
							{
								yAxis: 250,
								xAxis: 'D',
								itemStyle: {
									normal: {
										color: '#fd6f97',
									},
								},
							},
							{
								yAxis: 250,
								xAxis: 'E',
								itemStyle: {
									normal: {
										color: '#a181fc',
									},
								},
							},
						],
					},
				},
				{
					name: '完成',
					type: 'bar',
					xAxisIndex: 1,
					yAxisIndex: 1,
					silent: false,
					barMaxWidth: 20,
					z: 1,
					itemStyle: {
						normal: {
							barBorderRadius: [10, 10, 0, 0],
							color: (params) => {
								let colors = ['#dfeaff', '#ffdcc3', '#ffedcc', '#fed4e0', '#e3d9fe'];
								return colors[params.dataIndex];
							},
							label: {
								show: true,
								position: 'top',
								distance: 0,
								color: '#000',
								fontSize: 16,
								backgroundColor: {
									image: icon,
								},
								padding: [10, 15, 20, 15],
							},
						},
					},
					data: wanchengData,
					emphasis: {
						itemStyle: {
							color: '#389af4',
						},
					},
				},
				{ //折线
					data: [120, 75, 100, 80, 45],
					type: 'line',
					smooth: true,

					name: '折线图',
					symbol: 'none',
					lineStyle: {
						color: '#3275FB',
						width: 4,
						shadowColor: 'rgba(0, 0, 0, 0.3)', //设置折线阴影
						shadowBlur: 5,
						shadowOffsetY: 20,
					},
					areaStyle: { //区域填充样式
						normal: {
							//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: "rgba(25,163,223,.3)"


								},
								{
									offset: 1,
									color: "rgba(25,163,223, 0)"
								}
							], false),
							shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
							shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
						}
					}
				},
				{ //piek
					name: 'a',
					type: 'pie',
					xAxisIndex: 2,
					yAxisIndex: 2,
					clockWise: true,
					radius: [55, 65],
					itemStyle: {
						normal: {
							borderRadius: 7,
							color: '#82C0F9',
							shadowColor: '#389af4',
							shadowBlur: 0,
							label: {
								show: false,
							},
							labelLine: {
								show: false,
							},
						},
					},
					hoverAnimation: true,
					center: ['14%', '85%'],
					data: [{
							value: 54,
							label: {
								normal: {
									formatter: function(params) {
										return params.value + '%';
									},
									position: 'center',
									show: true,
									textStyle: {
										fontSize: '20',
										fontWeight: 'bold',
										color: '#389af4',
									},
								},
							},
						},
						{
							value: 46,
							name: 'invisible',
							itemStyle: {
								normal: {
									color: '#dfeaff',
								},
								emphasis: {
									color: '#dfeaff',
								},
							},
						},
					],
				},
				{
					name: 'b',
					type: 'pie',
					clockWise: true,
					radius: [55, 65],
					itemStyle: {
						normal: {
							borderRadius: 7,
							color: '#FFB379',
							shadowColor: '#ff8c37',
							shadowBlur: 0,
							label: {
								show: false,
							},
							labelLine: {
								show: false,
							},
						},
					},
					hoverAnimation: false,
					center: ['32%', '85%'],
					data: [{
							value: 44,
							label: {
								normal: {
									formatter: function(params) {
										return params.value + '%';
									},
									position: 'center',
									show: true,
									textStyle: {
										fontSize: '20',
										fontWeight: 'bold',
										color: '#ff8c37',
									},
								},
							},
						},
						{
							value: 56,
							name: 'invisible',
							itemStyle: {
								normal: {
									color: '#ffdcc3',
								},
								emphasis: {
									color: '#ffdcc3',
								},
							},
						},
					],
				},
				{
					name: 'c',
					type: 'pie',
					clockWise: true,
					radius: [55, 65],
					itemStyle: {
						normal: {
							borderRadius: 7,
							color: '#FFD184',
							shadowColor: '#ffc257',
							shadowBlur: 0,
							label: {
								show: false,
							},
							labelLine: {
								show: false,
							},
						},
					},
					hoverAnimation: false,
					center: ['50%', '85%'],
					data: [{
							value: 35,
							name: 'c',
							label: {
								normal: {
									formatter: function(params) {
										return params.value + '%';
									},
									position: 'center',
									show: true,
									textStyle: {
										fontSize: '20',
										fontWeight: 'bold',
										color: '#ffc257',
									},
								},
							},
						},
						{
							value: 65,
							name: 'invisible',
							itemStyle: {
								borderRadius: 7,
								normal: {
									color: '#ffedcc',
								},
								emphasis: {
									color: '#ffedcc',
								},
							},
						},
					],
				},
				{
					name: 'd',
					type: 'pie',
					clockWise: true,
					radius: [55, 65],
					itemStyle: {
						normal: {
							borderRadius: 7,
							color: '#FD84A5',
							shadowColor: '#fd6f97',
							shadowBlur: 0,
							label: {
								show: false,
							},
							labelLine: {
								show: false,
							},
						},
					},
					hoverAnimation: false,
					center: ['68%', '85%'],
					data: [{
							value: 30,
							label: {
								normal: {
									formatter: function(params) {
										return params.value + '%';
									},

									position: 'center',
									show: true,
									textStyle: {
										fontSize: '20',
										fontWeight: 'bold',
										color: '#fd6f97',
									},
								},
							},
						},
						{
							value: 70,
							name: 'invisible',
							itemStyle: {
								normal: {
									color: '#fed4e0',
								},
								emphasis: {
									color: '#fed4e0',
								},
							},
						},
					],
				},
				{
					name: 'e',
					type: 'pie',
					clockWise: true,
					radius: [55, 65],
					itemStyle: {
						normal: {
							borderRadius: 7,
							color: '#C0ACFD',
							shadowColor: '#a181fc',
							shadowBlur: 0,
							label: {
								show: false,
							},
							labelLine: {
								show: false,
							},
						},
					},
					hoverAnimation: false,
					center: ['86%', '85%'],
					data: [{
							value: 20,
							label: {
								normal: {
									formatter: function(params) {
										return params.value + '%';
									},
									position: 'center',
									show: true,
									textStyle: {
										fontSize: '20',
										fontWeight: 'bold',
										color: '#a181fc',
									},
								},
							},
						},
						{
							value: 80,
							name: 'invisible',
							itemStyle: {
								normal: {
									color: '#e3d9fe',
								},
								emphasis: {
									color: '#e3d9fe',
								},
							},
						},
					],
				},
			],
		};

		myChart.on('mouseover', (params) => {
			if (params.componentSubType === 'bar' && params.seriesName != '目标') {
				console.log(option, params.dataIndex);
				let colors = ['#389af4', '#ff8c37', '#ffc257', '#fd6f97', '#a181fc'];
				var color = colors[params.dataIndex];
				option.series[1].emphasis.itemStyle.color = color;
				var PIEindex = params.dataIndex + 3;
				option.series[PIEindex].radius = [60, 70];
				option.series[PIEindex].itemStyle.normal.color = colors[params.dataIndex];
				myChart.setOption(option);
			}
		});

		myChart.on('mouseout', (params) => {
			if (params.componentSubType === 'bar' && params.seriesName != '目标') {
				//  console.log(params);
				let colors = ['#82C0F9', '#FFB379', '#FFD184', '#FD84A5', '#C0ACFD'];
				option.series[1].itemStyle.normal.label.show = false;
				var PIEindex = params.dataIndex + 3;
				option.series[PIEindex].radius = [55, 65];
				option.series[PIEindex].itemStyle.normal.color = colors[params.dataIndex];
				myChart.setOption(option);
			}
		});

		if (option && typeof option === 'object') {
			myChart.setOption(option);
		}
	</script>
</html>
